<template>
    <div>
        <!--货主信息部分-->
        <a-row :gutter="18">
            <!--头像和昵称-->
            <a-col :xs="24" :sm="24" :md="14" :xl="16" class="aCol" style="height: 200px">
                <a-card class="aCard" style="height: 100%;background-color: #bbbbbb">
                    <div slot="cover" style="display: flex;">
                        <!--头像-->
                        <div>
                            <a-avatar :size="72" icon="user"
                                      style="float: left;margin-top: 58px;margin-left: 20px;margin-right: 25px;color: #722ed1"/>
                        </div>
                        <!--昵称&姓名&简介-->
                        <div style="width: 100%;margin-top: 60px">
                            <div style="width: calc(100% - 108px);float: right">
                                <div style="height: 45px;text-align: right;margin-right: 25px;margin-top: 15px;font-size: 20px">
                                    <a-icon type="pay-circle"
                                            style="margin-right: 12px;font-size: 35px;color: #2eabff"/>
                                    2555元
                                </div>
                            </div>
                            <div style="width: 100%;font-size: 25px;font-weight: bold;margin-top: 10px;color: #009688">
                                {{thisHzAllInfo.hzUser.userNc}}
                            </div>
                            <div style="width: 100%;font-size: 15px">{{thisHzAllInfo.hzUser.userXm}}</div>
                            <div :title="thisHzAllInfo.hzUser.userJj" style="margin-right: 15px;margin-top: 8px;overflow:hidden;
            text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;color: #222f3e">
                                {{thisHzAllInfo.hzUser.userJj}}
                            </div>
                        </div>
                    </div>
                </a-card>
                <!--注册信息-->
            </a-col>
            <a-col :xs="24" :sm="24" :md="10" :xl="8" class="aCol" style="height: 200px">
                <a-card class="aCard" style="height: 100%;background-color: #8cc8ff">
                    <hz-zc-table></hz-zc-table>
                </a-card>
            </a-col>
        </a-row>


        <a-row :gutter="18">
            <!--左边卡片部分-->
            <a-col :xs="24" :sm="24" :md="24" :xl="10" style="margin-left: 0;padding: 0;">
                <a-row :gutter="18" style="margin: 0">
                    <!--物流接单信息-->
                    <a-col :xs="24" :sm="24" :md="24" :xl="24" style="height: auto" class="aCol ">
                        <a-card style="height: auto" title="订单信息">
                            <div slot="cover" style="height: auto">
                                <wljd-table :WljdDataSource="WljdDataSource"></wljd-table>
                            </div>
                        </a-card>
                    </a-col>
                    <!--收藏司机，要展示头像，像微博那样-->
                    <a-col :xs="24" :sm="24" :md="24" :xl="24" class="aCol" style="height: 391px;">
                        <a-card class="aCard" title="收藏司机">
                            <div slot="cover">
                                <hz-gz-sj-list style="margin: 0 15px 0 15px;"></hz-gz-sj-list>
                            </div>
                        </a-card>
                    </a-col>
                </a-row>
            </a-col>
            <!--右边货物table部分-->
            <a-col :xs="24" :sm="24" :md="24" :xl="14" class="aCol" style="height: auto;">
                <a-card class="aCard" style="height: auto" title="货物信息">
                    <div slot="cover" style="height: auto">
                        <hz-hw-table></hz-hw-table>

                    </div>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import ARow from 'ant-design-vue/es/grid/Row'
    import ACol from 'ant-design-vue/es/grid/Col'
    import WljdTable from '@/views/my/components/WljdTable'
    import HzHwTable from '@/views/my/single/HzShowModules/HzHwTable'
    import HzGzSjList from '@/views/my/single/HzShowModules/HzGzSjList'
    import HzZcTable from '@/views/my/single/HzShowModules/HzZcTable'
    import {getAction} from '@/api/manage'

    export default {
        name: 'HzShow',
        components: {ACol, ARow, WljdTable, HzHwTable, HzGzSjList, HzZcTable},
        data() {
            return {
                WljdDataSource: null,
                HzHwDataSource: null,
                thisHzAllInfo: null,
                thisHzId: null,
                url: {
                    getOneHzInfo: "/my/hzInfo/getOneHzInfo?hzId="
                }
            }
        },
        created() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.thisHzId = this.$route.query.thisUserId;
                var getOneHzUrl = this.url.getOneHzInfo + this.thisHzId;
                console.log(getOneHzUrl);
                getAction(getOneHzUrl).then((res) => {
                    if (res.success) {
                        console.log('OneHz', res.result);
                        this.thisHzAllInfo = res.result;
                        this.WljdDataSource = this.thisHzAllInfo.hzAllWljd;
                        console.log('WljdDataSource',this.WljdDataSource);
                        for(var i = 0 ;i<this.WljdDataSource.length;i++){
                            this.WljdDataSource[i].key=i+1;
                        }
                    }
                })
            }
        }
    }
</script>

<style>
    .aCard {
        height: 100%;
        width: 100%;
    }

    .aCol {
        margin-bottom: 18px;
        margin-top: 25px;
    }
</style>